package org.hank.compose_yyzs.ui.screen

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.Divider
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.RadioButton
import androidx.compose.material3.Surface
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment.Companion.BottomCenter
import androidx.compose.ui.Alignment.Companion.Center
import androidx.compose.ui.Alignment.Companion.CenterVertically
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import coil.compose.AsyncImage
import coil.compose.AsyncImagePainter
import coil.compose.AsyncImagePainter.State.Empty.painter
import com.airbnb.lottie.compose.LottieCompositionSpec
import com.airbnb.lottie.compose.animateLottieCompositionAsState
import com.airbnb.lottie.compose.rememberLottieComposition
import com.google.accompanist.systemuicontroller.rememberSystemUiController
import com.ramcosta.composedestinations.annotation.Destination
import com.ramcosta.composedestinations.navigation.DestinationsNavigator
import kotlinx.coroutines.launch
import org.hank.compose_yyzs.R
import org.hank.compose_yyzs.ui.theme.AppTheme
import org.hank.compose_yyzs.ui.theme.black
import org.hank.compose_yyzs.utils.getString
import org.hank.compose_yyzs.viewmodel.ScanViewModel

//  ┏┓　　　┏┓
//┏┛┻━━━┛┻┓
//┃　　　　　　　┃
//┃　　　━　　　┃
//┃　┳┛　┗┳　┃
//┃　　　　　　　┃
//┃　　　┻　　　┃
//┃　　　　　　　┃
//┗━┓　　　┏━┛
//    ┃　　　┃                  神兽保佑
//    ┃　　　┃                  永无BUG！
//    ┃　　　┗━━━┓
//    ┃　　　　　　　┣┓
//    ┃　　　　　　　┏┛
//    ┗┓┓┏━┳┓┏┛
//      ┃┫┫　┃┫┫
//      ┗┻┛　┗┻┛
/**
 *@auth: Hank
 *邮箱: cs16xiaoc1@163.com
 *创建时间: 2023/6/2 17:11
 *描述:
 */
@OptIn(ExperimentalFoundationApi::class)
@Destination
@Composable
fun ScanScreen(
//    navigation: DestinationsNavigator
) {
    var viewModel: ScanViewModel = hiltViewModel()
    var isOpen = viewModel.autoUpload.collectAsStateWithLifecycle()

    Column(modifier = Modifier.fillMaxSize()) {
        Surface(shadowElevation = 5.dp) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(color = AppTheme.colors.mainColor)
            ) {
                Text(
                    text = getString(resourceId = R.string.scan_title), modifier = Modifier
                        .align(Alignment.Center)
                        .padding(top = 16.dp, bottom = 16.dp),
                    style = MaterialTheme.typography.titleLarge
                )

                Image(
                    painter = painterResource(id = R.mipmap.ic_search),
                    contentDescription = "",
                    modifier = Modifier
                        .align(
                            Alignment.CenterEnd
                        )
                        .padding(end = 16.dp)
                )
            }
        }

        Spacer(modifier = Modifier.height(8.dp))
        Column(
            modifier = Modifier
                .background(color = AppTheme.colors.mainColor)
                .fillMaxWidth()
                .padding(16.dp)
        ) {

//            AsyncImage(model = "", contentDescription = "")

            Text(text = getString(resourceId = R.string.scan_sub_title))
            Spacer(modifier = Modifier.height(16.dp))
            Row(modifier = Modifier.fillMaxWidth()) {
                Box(
                    modifier = Modifier
                        .weight(3f)
                        .height(40.dp)
                        .border(
                            width = 1.dp,
                            color = black,
                            shape = MaterialTheme.shapes.extraSmall
                        )
                ) {
                    Text(
                        text = getString(resourceId = R.string.scan_select_task_hint),
                        style = MaterialTheme.typography.bodyMedium.copy(color = AppTheme.colors.textSecondary),
                        modifier = Modifier
                            .align(Alignment.CenterStart)
                            .padding(start = 16.dp)
                    )
                    Image(
                        painter = painterResource(id = R.mipmap.ic_into_grey),
                        contentDescription = "",
                        modifier = Modifier
                            .align(
                                Alignment.CenterEnd
                            )
                            .padding(end = 16.dp)
                    )
                }
                Spacer(modifier = Modifier.width(16.dp))
                Box(
                    modifier = Modifier
                        .weight(1f)
                        .height(40.dp)
                        .border(
                            width = 1.dp,
                            color = black,
                            shape = MaterialTheme.shapes.extraSmall
                        )
                ) {
                    Text(
                        text = getString(resourceId = R.string.scan_measure_num),
                        style = MaterialTheme.typography.bodyMedium.copy(color = AppTheme.colors.textSecondary),
                        modifier = Modifier
                            .align(Alignment.Center)
                    )
                }
            }
            Spacer(modifier = Modifier.height(16.dp))
            Row {
                Text(
                    text = getString(resourceId = R.string.scan_before_tips_content),
                    modifier = Modifier
                        .weight(1f)
                        .align(CenterVertically)
                )
                Image(
                    modifier = Modifier
                        .align(CenterVertically)
                        .clickable(
                            indication = null,
                            interactionSource = remember { MutableInteractionSource() },
                            onClick = {
                                viewModel.autoUploadSwitch()
                            }),
                    painter = painterResource(id = if (isOpen.value) R.mipmap.btn_open else R.mipmap.btn_close),
                    contentDescription = ""
                )
            }
            Spacer(modifier = Modifier.height(16.dp))
            Row {
                Text(
                    text = getString(resourceId = R.string.measure_detail_mode),
                    modifier = Modifier
                        .weight(1f)
                        .align(CenterVertically)
                )
                Text(
                    text = getString(resourceId = R.string.scan_measure_setting),
                    style = MaterialTheme.typography.bodyMedium.copy(color = AppTheme.colors.primaryBtnBg),
                )
            }
        }
// 测试属性动画
//        var isRotate = remember { mutableStateOf(false) }
//        var rotateValue = animateFloatAsState(targetValue = if(isRotate.value) 360f else 0f, label = "",
//            animationSpec = spring(dampingRatio = 1.5f)
//        )

        Box(modifier = Modifier.weight(1f)) {
            Button(
                modifier = Modifier
                    .align(BottomCenter)
                    .fillMaxWidth()
                    .padding(bottom = 128.dp, start = 32.dp, end = 32.dp),
                onClick = {
//                    isRotate.value = !isRotate.value
                },
                shape = MaterialTheme.shapes.medium
            ) {
                Image(
                    painter = painterResource(id = R.mipmap.ic_start_scanning),
                    contentDescription = "",
//                    modifier = Modifier.rotate(rotateValue.value)
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(
                    text = stringResource(id = R.string.scan_start),
                    style = MaterialTheme.typography.titleMedium
                )
                Spacer(modifier = Modifier.width(16.dp))
            }
        }
    }
}